<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { getAsseInfoDomainAPI, getAsseInfoDomainHisAPI } from '@/api/search/index'
import { useTablePage } from '@/hooks/web';
const props = defineProps({
  id: { type: String, required: true }
})
const { table:asTable, page:asPage,getRecords:asGetRecords } = useTablePage(getAsseInfoDomainAPI, { ruleForm: { id: props.id, },isMounted: false })
const { table:hsTable, page:hsPage,getRecords:hsGetRecords } = useTablePage(getAsseInfoDomainHisAPI, { ruleForm: { id: props.id, },isMounted: false })
const asTiT = reactive({
  columns: [
    { label: '解析域名', prop: 'domain' },
    { label: '域名解析时间', prop: 'updateTime' },
    { label: '解析IP', prop: 'ip' },
    { label: '状态', prop: 'status' },
    { label: '描述', prop: 'desc' }
  ]
})
const hsTiT = reactive({
  columns: [
    { label: 'IP', prop: 'ip' },
    { label: '地理位置', prop: 'city' },
    { label: '运营商服务商', prop: 'work' }
  ]
})
onMounted(() => {
  asGetRecords()
  hsGetRecords()
})
</script>
<template>
  <!-- 解析域名列表 -->
  <div class="title">{{ `解析域名列表(${asTable.records.length})` }}</div>
  <jmp-table :data="asTable.records" :columns="asTiT.columns" :loading="asTable.loading" />
  <!-- 分页 -->
  <jmp-pagination v-model:page="asPage.pageNum" v-model:limit="asPage.pageSize" v-model:total="asPage.total"/>
  <hr style="border: 1px solid #e4e7ed;">
  <!-- 历史解析 -->
  <div class="history">
    <div class="title">{{ `历史解析IP(${hsTable.records.length})` }}</div>
    <jmp-table :data="hsTable.records" :columns="hsTiT.columns" :loading="hsTable.loading" />
    <jmp-pagination v-model:page="hsPage.pageNum" v-model:limit="hsPage.pageSize" v-model:total="hsPage.total"/>
  </div>
</template>
<style scoped lang="scss">
.title {
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.more {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
</style>
